@import models.Tables.CdsRow
@import models.Tables.PepRow
@import models.Tables.AnnoRow
@(x: (AnnoRow, CdsRow, PepRow))(implicit request: play.api.mvc.RequestHeader)
@anno = @{
	x._1
}

@cds = @{
	x._2
}

@pep = @{
	x._3
}

@main("Detail") {
	<script src="@routes.Assets.at("plotly/dist/plotly.min.js")" type="text/javascript"></script>

	<style>
			th {
				width: 20%;
			}

			.myBold {
			}

			.myTd {
				max-height: 150px;
				overflow: auto;
				padding-right: 25px;
			}

			.js-plotly-plot .plotly .cursor-crosshair {
				cursor: default;
			}

			.panel {
				border-bottom: 0px;
				border-left: 0px;
				border-right: 0px;
				border-radius: 0px;
			}


	</style>
	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Detail information</h2>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">

			<div class="panel-heading">
				<h3 class="panel-title">
					<a class="accordion-toggle" data-toggle="collapse" href="#basic">Overview</a>
				</h3>
			</div>


			<div class="panel panel-primary">

				<div id="basic" class="panel-collapse collapse in">
					<div class="panel-body">
						<div class="table-responsive">
							<table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
								word-wrap: break-word">
								<tbody>
									<tr>
										<th>ID</th>
										<td>
										@anno.id
										</td>
									</tr>
									<tr>
										<th>Symbol</th>
										<td>
										@anno.geneName
										</td>
									</tr>
									<tr>
										<th>Description</th>
										<td>
										@anno.description
										</td>
									</tr>
									<tr>
										<th>Locus</th>
										<td>
										@{
											anno.locus
										}
										</td>
									</tr>
									<tr>
										<th>Strand</th>
										<td>
										@anno.strand
										</td>
									</tr>
									<tr>
										<th>Query_length</th>
										<td>
										@anno.qeuryLength
										</td>
									</tr>
									<tr>
										<th>NR_tophit_name</th>
										<td>
										@anno.nrTophitName
										</td>
									</tr>
									<tr>
										<th>NR_tophit_descrip</th>
										<td>
										@anno.nrTophitDescrip
										</td>
									</tr>
									<tr>
										<th>NR_top_%-Simil</th>
										<td>
										@anno.nrTopSimil
										</td>
									</tr>
									<tr>
										<th>Swiss_tophit_name</th>
										<td>
										@anno.swissTophitName
										</td>
									</tr>
									<tr>
										<th>Swissprot_tophit_descrip</th>
										<td>
										@anno.swissprotTophitDescrip
										</td>
									</tr>
									<tr>
										<th>Swissprot_top_%-Simil</th>
										<td>
										@anno.swissprotTopSimil
										</td>
									</tr>
									<tr>
										<th>GOs</th>
										<td>
										@anno.gos
										</td>
									</tr>
									<tr>
										<th>COG/KOG</th>
										<td>
										@anno.cog
										</td>
									</tr>
									<tr>
										<th>Function</th>
										<td>
										@anno.function
										</td>
									</tr>
									<tr>
										<th>KO/Gene_ID</th>
										<td>
										@anno.ko
										</td>
									</tr>
									<tr>
										<th>KEGG_GENE_NAME</th>
										<td>
										@anno.keggGeneName
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="panel-heading">
				<h3 class="panel-title">
					<a class="accordion-toggle" data-toggle="collapse" href="#genomeViewer">Genome Browser</a>
				</h3>
			</div>
			<div class="panel panel-primary">

				<div id="genomeViewer" class="panel-collapse collapse in">
					<div class="panel-body">

						<iframe id="jBrowse" style="border: 1px solid rgb(80, 80, 80);"
						height="250" width="100%" name="jbrowse_iframe">
							<p>Your browser does not support iframes.</p> </iframe>

					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="panel-heading">
				<h3 class="panel-title">
					<a class="accordion-toggle" data-toggle="collapse" href="#sequence" >Sequence </a>
				</h3>
			</div>
			<div class="panel panel-primary">

				<div id="sequence" class="panel-collapse collapse in">
					<div class="panel-body">
						<div class="table-responsive">
							<table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
								word-wrap: break-word">
								<tbody>
									<tr>
										<th>Cds
											<button class="btn-link myDownloadCds" ><i class="fa fa-download"></i></button>
										</th>
										<td class="monospace ">
											<div class="myTd">
												>@cds.geneId<br>
												<div id="cds">
												@cds.cds
												</div>
											</div>

										</td>
									</tr>
									<tr>
										<th>Pep
											<button class="btn-link myDownloadPep" ><i class="fa fa-download"></i></button>
										</th>
										<td class="monospace">
											<div class="myTd">
												>@pep.geneId<br>
												<div id="pep">
												@pep.pep
												</div>
											</div>

										</td>
									</tr>

								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="root"></div>

	<script>

			$(function () {
				Detail.init("@anno.id")

			})

	</script>
}
